<template>
  <div>
    <el-dialog
      title="入驻商家"
      width="960px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <el-form
          :model="params"
          :rules="rules"
          inline
          ref="ruleForm"
          label-position="left"
          label-width="100px"
          size="small"
        >
          <div class="flexItem">
            <el-form-item label="店铺名称：" prop="title">
              <el-input v-model="params.title" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="营业时间：" prop="business_hours">
              <el-time-picker
                is-range
                v-model="params.business_hours"
                value-format="HH:mm:ss"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              >
              </el-time-picker>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="负责人:" prop="principal">
              <!-- <el-input
                v-model="params.principal"
                placeholder="请输入"
              ></el-input> -->
              <el-autocomplete
                popper-class="my-autocomplete"
                v-model="params.principal"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入"
                @select="handleSelect"
              >
                <template slot-scope="{ item }">
                  <div v-if="item.id == -1">无匹配结果</div>
                  <div v-else>
                    <div class="name">{{ item.userName }}</div>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>

            <el-form-item label="店铺地址:" prop="business_addr">
              <el-input
                v-model="params.business_addr"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="联系电话：" prop="phone">
              <el-input
                oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
                v-model="userInfo.mobile"
                @blur="userInfo.mobile = $event.target.value"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item label="经营范围:" prop="business_scope">
              <el-input
                v-model="params.business_scope"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item label="店铺介绍:">
            <el-input
              style="width: 720px"
              type="textarea"
              v-model="params.store_introduction"
              :rows="4"
            ></el-input>
          </el-form-item>
          <div class="flexItem">
            <el-form-item label="店面照片:" prop="store_pictures">
              <UploadPhoto
                @onSuccess="onSuccess"
                :fileList="params.store_pictures"
              ></UploadPhoto>
            </el-form-item>
            <el-form-item label="经营许可证:" prop="business_license">
              <UploadPhoto
                @onSuccess="onSuccess2"
                :fileList="params.business_license"
              ></UploadPhoto>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadPhoto from "@/components/UploadPhoto.vue";
import { addBusiness, editBusiness } from "@/api/business.js";
import { userList } from "@/api/activity.js";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    shopInfo: {
      type: Object,
      default: {
        business_hours: "",
      },
    },
  },
  data() {
    return {
      params: {
        title: "",
        business_hours: ["00:00", "00:00"],
        principal: "",
        principal_id: "",
        business_addr: "",
        phone: "",
        business_scope: "",
        store_introduction: "",
        store_pictures: [],
        business_license: [],
      },
      userInfo: {},
      rules: {
        title: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
        business_hours: [
          { required: true, message: "请选择营业时间", trigger: "change" },
        ],
        principal: [
          { required: true, message: "请输入负责人", trigger: "blur" },
        ],
        business_addr: [
          { required: true, message: "请输入店铺地址", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        business_scope: [
          { required: true, message: "请输入经营范围", trigger: "blur" },
        ],
        store_introduction: [
          { required: true, message: "请输入店铺介绍", trigger: "blur" },
        ],
        store_pictures: [
          { required: true, message: "请上传店面照片", trigger: "change" },
        ],
        business_license: [
          { required: true, message: "请上传经营许可证", trigger: "change" },
        ],
      },
    };
  },

  components: {
    UploadPhoto,
  },

  computed: {},

  beforeMount() {},

  mounted() {
    this.pictureShow();
  },

  methods: {
    pictureShow() {
      let shopCopyInfo = JSON.parse(JSON.stringify(this.shopInfo));

      if (Object.keys(shopCopyInfo).length != 0) {
        console.log(shopCopyInfo, "|>>>>>>>>");
        this.params = shopCopyInfo;
        this.userInfo.mobile = shopCopyInfo.phone;
        this.params.business_hours = shopCopyInfo.business_hours.split(",");

        this.params.store_pictures = shopCopyInfo.store_pictures
          .split(",")
          .map((item) => {
            return {
              name: "",
              url: item,
            };
          });

        this.params.business_license = shopCopyInfo.business_license
          .split(",")
          .map((item) => {
            return {
              name: "",
              url: item,
            };
          });

        console.log(this.params, "-----====");
      }
    },
    //获取上传的图片地址
    onSuccess(val) {
      this.params.store_pictures = val;
    },
    //获取上传的图片地址
    onSuccess2(val) {
      this.params.business_license = val;
    },

    async querySearchAsync(queryString, cb) {
      if (queryString && queryString.length > 0) {
        this.input = queryString;
        try {
          const data = await userList({
            keywords: this.params.principal,
          }); //search定义在data里
          console.log(data);
          // 赋值给建议列表，渲染到页面
          let list = data.data;
          // 如果list.length等于0，则代表没有匹配到结果。手动给list添加一条提示信息
          if (list.length == "0") {
            list.push({
              id: "-1",
              value: "无匹配结果",
            });
            // 调用 callback 返回建议列表的数据
            cb(list);
          } else {
            // list = list.map((item) => {
            //   return {
            //     value: `${item.userName}`,
            //     id: `${item.id}`,
            //   };
            // });
            // 调用 callback 返回建议列表的数据
            cb(list);
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        cb([]);
      }
    },
    handleSelect(val) {
      this.params.principal = val.userName;
      this.params.principal_id = val.id;
      this.userInfo = val;
      this.params.phone = val.mobile;
      this.disabled = true;
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //处理提交字段
          let params = {
            ...this.params,
            business_hours: this.params.business_hours.join(","),
            store_pictures: "",
            business_license: "",
          };
          if (this.params.store_pictures.length > 0) {
            // console.log(
            //   this.params.store_pictures,
            //   "**********************---"
            // );
            params.store_pictures = this.params.store_pictures
              .map((item) => item.url)
              .join(",");
          }
          if (this.params.business_license.length > 0) {
            params.business_license = this.params.business_license
              .map((item) => item.url)
              .join(",");
          }
          if (Object.keys(this.shopInfo).length != 0) {
            //修改
            editBusiness(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功",
                });
                this.$emit("handleClose", true);
              }
            });
          } else {
            //新增
            addBusiness(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "提交成功",
                });
                this.$emit("handleClose", true);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  /deep/.flexItem {
    display: flex;
    .el-form-item {
      flex: 1;
    }
    .el-input__inner {
      width: 260px;
    }
    .el-range-editor.el-input__inner {
      width: 290px;
    }
  }
}
</style>
